<template>
	<view class="container">
		<view class="no-cart" v-if="cartGoods.length <= 0 && cartGoodsDisabled.length <= 0">
			<view class="c">
				<view class="title-box">
					购物车空空如也～
				</view>
				<view class="to-index-btn" @tap="toIndexPage">
					去逛逛
				</view>
			</view>
		</view>
		<view v-else>
			<!-- #ifdef MP || H5-->
			<view class="tui-edit-goods" v-if="cartGoods.length > 0">
				<view>购物车已选<text class="tui-goods-num">{{cartTotal.checkedGoodsCount}}</text>件商品</view>
				<view>
					<tui-button :plain="true" shape="circle" width="160rpx" height="60rpx" :size="24"
						@click="editGoods">{{isEdit?"完成":"编辑商品"}}</tui-button>
				</view>
			</view>
			<!-- #endif -->

			<checkbox-group>
				<view class="tui-cart-cell  tui-mtop" v-for="(item,index) in cartGoods" :key="index">
					<tui-swipe-action :actions="actions" @click="deleteCartByItem({'item':item})" :params="item">
						<template v-slot:content>
							<view class="tui-goods-item">
								<view class="tui-checkbox" @tap="checkedItem(index)">
									<checkbox :value="item.id" :checked="item.checked === 1" color="yellow"></checkbox>
								</view>
								<image :src="item.listPicUrl" class="tui-goods-img" :data-id="item.goodsId"
									@tap="navToGoodsDetail" />
								<view class="tui-goods-info">
									<view class="tui-goods-title">
										{{item.goodsName}}
									</view>
									<view class="tui-goods-model" @click="updateSkuShow(item)">
										<view class="tui-model-text">{{item.goodsSpecifitionNameValue||''}}</view>
										<tui-icon name="arrowdown" :size="16" color="#333"></tui-icon>
									</view>
									<view class="tui-price-box">
										<view class="tui-goods-price">￥{{item.retailPrice || getPrice}}</view>
										<tui-numberbox :height="36" :width="64" :min="item.minSell||1" :step="1"
											:index="index" :custom="item" :value="item.number" @change="changeNum">
										</tui-numberbox>
									</view>
								</view>
							</view>
						</template>
					</tui-swipe-action>
				</view>
			</checkbox-group>

			<!--商品失效-->
			<view class="tui-cart-cell  tui-mtop" v-if="cartGoodsDisabled.length>0">
				<view class="tui-activity">
					<view class="tui-bold">失效商品</view>
					<view class="tui-buy">
						<tui-button type="gray" :plain="true" shape="circle" width="200rpx" height="56rpx" :size="24"
							@click="clearDisable">
							清空失效商品</tui-button>
					</view>
				</view>
				<view :class="{'tui-invalid-ptop':index!==0}" v-for="(item,index) in cartGoodsDisabled" :key="index">
					<tui-swipe-action :actions="actions" @click="deleteCartByItem({'item':item})" :params="item">
						<template v-slot:content>
							<view class="tui-goods-item">
								<view class="tui-checkbox tui-invalid-pr">
									<view class="tui-invalid-text">失效</view>
								</view>
								<image :src="item.listPicUrl" class="tui-goods-img" />
								<view class="tui-goods-info">
									<view class="tui-goods-title tui-gray">
										{{item.goodsName}}
									</view>
									<view class="tui-price-box tui-flex-center">
										<view class="tui-goods-invalid">产品失效</view>
									</view>
								</view>
							</view>
						</template>
					</tui-swipe-action>
				</view>
			</view>
		</view>
		<view v-if="footprintList.length >0">
			<!--猜你喜欢-->
			<tui-divider :size="28" :bold="true" color="#333" width="50%">
				<tui-icon name="like" :size="18" color="#58C1E7"></tui-icon>
				<text class="tui-youlike">猜你喜欢</text>
			</tui-divider>
			<view class="tui-product-list">
				<view class="tui-product-container">
					<block v-for="(item,index) in footprintList" :key="index" v-if="(index+1)%2!=0">
						<!--商品列表-->
						<view class="tui-pro-item" hover-class="hover" :hover-start-time="150" :data-id="item.goodsId"
							@tap="navToGoodsDetail">
							<image :src="item.listPicUrl" class="tui-pro-img" mode="widthFix" />
							<view class="tui-pro-content">
								<view class="tui-pro-tit">{{item.goodsName}}</view>
								<view>
									<view class="tui-pro-price">
										<text class="tui-sale-price">￥{{item.retailPrice}}</text>
										<text class="tui-factory-price">￥{{item.marketPrice}}</text>
									</view>
									<view class="tui-pro-pay">{{item.sales||0}}人付款</view>
								</view>
							</view>
						</view>
					</block>
				</view>
				<view class="tui-product-container">
					<block v-for="(item,index) in footprintList" :key="index" v-if="(index+1)%2==0">
						<!--商品列表-->
						<view class="tui-pro-item" hover-class="hover" :hover-start-time="150" :data-id="item.goodsId"
							@tap="navToGoodsDetail">
							<image :src="item.listPicUrl" class="tui-pro-img" mode="widthFix" />
							<view class="tui-pro-content">
								<view class="tui-pro-tit">{{item.goodsName}}</view>
								<view>
									<view class="tui-pro-price">
										<text class="tui-sale-price">￥{{item.retailPrice}}</text>
										<text class="tui-factory-price">￥{{item.marketPrice}}</text>
									</view>
									<view class="tui-pro-pay">{{item.sales||0}}人付款</view>
								</view>
							</view>
						</view>
					</block>
				</view>
			</view>
		</view>
		<!--tabbar-->
		<view class="tui-tabbar" v-if="cartGoods.length > 0">
			<view class="tui-checkAll">
				<checkbox-group @change="checkedAll">
					<label class="tui-checkbox">
						<checkbox :checked="checkedAllStatus ? true : false" color="yellow"></checkbox>
						<text class="tui-checkbox-pl">全选</text>
					</label>
				</checkbox-group>
				<view class="tui-total-price" v-if="!isEdit">合计:<text
						class="tui-bold">￥{{cartTotal.checkedGoodsAmount || getPrice}}</text>
				</view>
			</view>
			<view>
				<tui-button width="200rpx" height="70rpx" :size="30" shape="circle" v-if="!isEdit"
					@click="checkoutOrder">去结算({{cartTotal.checkedGoodsCount}})</tui-button>
				<tui-button width="200rpx" height="70rpx" :size="30" shape="circle" :plain="true"
					@click="deleteCart" v-else>删除</tui-button>
			</view>
		</view>

		<!--底部选择层-->
		<tui-bottom-popup :show="openAttr" tui-popup-class="tui-popup" @close="switchAttrPop">
			<view class="tui-popup-box">
				<view class="tui-product-box tui-padding">
					<image :src="selectPic" @click="previewSkuImg(selectPic)" class="tui-popup-img"></image>
					<view class="tui-popup-price">
						<view class="tui-amount tui-bold">￥{{selectPrice}}<text
								class="tui-original-price tui-gray tui-line-through">￥{{selectMarketPrice||''}}</text>
						</view>
						<view class="tui-number">编号:{{selectGoodsSn}} 库存：{{selectStock}}</view>
					</view>
				</view>
				<scroll-view scroll-y class="tui-popup-scroll">
					<view class="tui-scrollview-box">
						<view class="tui-bold tui-attr-title" v-for="(attrValueObj, attrIndex) in keyValue"
							:key="attrIndex">{{attrValueObj.key}}
							<view class="tui-attr-box">
								<view v-for="(value, valueIndex) in attrValueObj.attrValues" :key="valueIndex"
									:class="'tui-attr-item tui-attr-item-' + (attrIndex==firstIndex || attrValueObj.attrValueStatus[valueIndex]?(value==attrValueObj.selectedValue?'active':''):'disabled')"
									@tap="selectAttrValue" :data-status="attrValueObj.attrValueStatus[valueIndex]"
									:data-value="value" :data-key="attrValueObj.key" :data-index="attrIndex" :data-vi="valueIndex"
									:data-selectedvalue="attrValueObj.selectedValue">{{value}}</view>
							</view>
						</view>
						<view class="tui-number-box tui-bold tui-attr-title">
							<view class="tui-attr-title">数量</view>
							<tui-numberbox :iconSize="22" :height="38" :width="56" :value="number" :step="1"
								:min="minNumber||1" @change="changeNumber"></tui-numberbox>
						</view>
					</view>
				</scroll-view>
				<view class="tui-operation tui-operation-right tui-right-flex tui-popup-btn">
					<tui-button shape="circle" :size="25" height="60rpx"
						@click="updateSku">确定</tui-button>
				</view>
				<tui-icon name="close-fill" color="#999" class="tui-icon-close-fill" :size="25" @click="switchAttrPop">
				</tui-icon>
			</view>
		</tui-bottom-popup>
	</view>
</template>

<script>
	const util = require("@/utils/util.js")
	export default {
		data() {
			return {
				openAttr: false,
				selected: '',
				selectPrice: '',
				selectMarketPrice: '',
				selectPic: '',
				selectStock: '',
				selectedText: '',
				selectGoodsSn: '',
				goods: {},
				number: 1,
				minNumber: 1,
				commodityAttr: [],
				includeGroup: [],
				selectGroup: {},// 选中的SKU
				keyValue: [],
				cartGoods: [],
				cartGoodsDisabled: [],
				checkedAllStatus: false,
				firstIndex: 0,
				cartIds: [], //购物车id
				cartTotal: {
					"goodsCount": 0,
					"goodsAmount": 0.00,
					"checkedGoodsCount": 0,
					"checkedGoodsAmount": 0.00
				},
				actions: [{
					name: '删除',
					color: '#fff',
					fontsize: 28,
					width: 64,
					background: '#F82400'
				}],
				isEdit: false,
				footprintList: []
			}
		},
		filters: {
			getPrice(price) {
				price = price || 0;
				return price.toFixed(2)
			}
		},
		methods: {
			updateSku: function() {
				var that = this;
				var value = [];
				for (var i = 0; i < that.keyValue.length; i++) {
					if (that.keyValue[i].selectedValue && that.keyValue[i].attrValueStatus[that.keyValue[i].selectedIndex]) {
						value.push(that.keyValue[i].selectedValue);
					}
				}
				if (value.length < that.keyValue.length) {
					util.toast('请选择完整！');
				} else {
					if (!that.includeGroup[0]) {
						util.toast('商家暂未添加商品规格！');
						that.openAttr = !that.openAttr;
						return;
					}
					//更新购物车
					util.request('cart/updateSku', {
						skuId: that.selectGroup.id,
						goodsId: that.goods.id,
						referrerUserId: that.referrerUserId,
						number: that.number,
						selectedText: that.selectedText
					}, "POST").then(function(res) {
						let _res = res;
						if (_res.code == 0) {
							that.getCartList();
							that.openAttr = !that.openAttr;
						} else {
							util.toast(_res.msg);
						}
					});
				}
			},
			updateSkuShow: function(item) {
				var that = this;
				that.goods = {}
				that.minNumber = 1
				that.number = 1
				that.selectPrice = ''
				that.selectMarketPrice = ''
				that.selectPic = ''
				that.selectStock = ''
				that.selectGoodsSn = ''
				that.commodityAttr = []
				that.includeGroup = that.commodityAttr
				that.keyValue = []

				util.request('goods/detail', {
					goodsId: item.goodsId
				}).then(function(res) {
					if (res.code === 0) {
						that.goods = res.data.info
						that.minNumber = res.data.info.minSell || 1
						that.selectPrice = res.data.info.retailPrice
						that.selectMarketPrice = res.data.info.marketPrice
						that.selectPic = res.data.info.listPicUrl
						that.selectStock = res.data.info.goodsNumber
						that.selectGoodsSn = res.data.info.goodsSn

						that.commodityAttr = res.data.info.goodsSkuEntityList;
						that.includeGroup = res.data.info.goodsSkuEntityList;
						that.distachAttrValue(that.commodityAttr);
						// 只有一个属性组合的时候默认选中
						// console.log(this.keyValue);
						if (that.commodityAttr.length == 1) {
							let selectedText = '';
							for (var i = 0; i < that.commodityAttr[0].keyValue.length; i++) {
								that.keyValue[i].selectedValue = that.commodityAttr[0].keyValue[i].value;
								that.keyValue[i].selectedIndex = 0
								selectedText += that.keyValue[i].key + '：' + that.keyValue[i].selectedValue + '；'
							}
							that.selectedText = selectedText
							that.selectGroup = that.commodityAttr[0]
						}
						that.setSelect();
						if (that.openAttr == false) {
							//打开规格选择窗口
							that.openAttr = !that.openAttr;
						}
					}
				});
			},
			changeNumber: function(event) {
				this.number = event.value;
			},
			/* 获取数据 */
			distachAttrValue: function(commodityAttr) {
				/**
				将后台返回的数据组合成类似
				{
				key:'型号',
				keyValue:['1','2','3']
				}
				*/
				// 把数据对象的数据（视图使用），写到局部内
				var keyValue = this.keyValue;
				// 遍历获取的数据
				for (var i = 0; i < commodityAttr.length; i++) {
					for (var j = 0; j < commodityAttr[i].keyValue.length; j++) {
						var attrIndex = this.getAttrIndex(commodityAttr[i].keyValue[j].key, keyValue);
						// console.log('属性索引', attrIndex);
						// 如果还没有属性索引为-1，此时新增属性并设置属性值数组的第一个值；索引大于等于0，表示已存在的属性名的位置
						if (attrIndex >= 0) {
							// 如果属性值数组中没有该值，push新值；否则不处理
							if (!this.isValueExist(commodityAttr[i].keyValue[j].value, keyValue[attrIndex].attrValues)) {
								keyValue[attrIndex].attrValues.push(commodityAttr[i].keyValue[j].value);
							}
						} else {
							keyValue.push({
								key: commodityAttr[i].keyValue[j].key,
								attrValues: [commodityAttr[i].keyValue[j].value]
							});
						}
					}
				}
				for (var i = 0; i < keyValue.length; i++) {
					for (var j = 0; j < keyValue[i].attrValues.length; j++) {
						if (keyValue[i].attrValueStatus) {
							keyValue[i].attrValueStatus[j] = true;
						} else {
							keyValue[i].attrValueStatus = [];
							keyValue[i].attrValueStatus[j] = true;
						}
					}
				}
				this.keyValue = keyValue;
			},
			getAttrIndex: function(attrName, keyValue) {
				// 判断数组中的attrKey是否有该属性值
				for (var i = 0; i < keyValue.length; i++) {
					if (attrName == keyValue[i].key) {
						break;
					}
				}
				return i < keyValue.length ? i : -1;
			},
			isValueExist: function(value, valueArr) {
				// 判断是否已有属性值
				for (var i = 0; i < valueArr.length; i++) {
					if (valueArr[i] == value) {
						break;
					}
				}
				return i < valueArr.length;
			},
			/* 选择属性值事件 */
			selectAttrValue: function(e) {
				/*
				点选属性值，联动判断其他属性值是否可选
				{
				key:'型号',
				keyValue:['1','2','3'],
				selectedValue:'1',
				attrValueStatus:[true,true,true]
				}
				console.log(e.currentTarget.dataset);
				*/
				var keyValue = this.keyValue;
				var index = e.currentTarget.dataset.index; //属性索引
				var key = e.currentTarget.dataset.key;
				var value = e.currentTarget.dataset.value;
				var valueindex = e.currentTarget.dataset.vi;
				if (e.currentTarget.dataset.status || index == this.firstIndex) {
					if (e.currentTarget.dataset.selectedvalue == e.currentTarget.dataset.value) {
						// 取消选中
						this.disSelectValue(keyValue, index, key, value, valueindex);
					} else {
						// 选中
						this.selectValue(keyValue, index, key, value, valueindex);
					}
				}
			},
			/* 选中 */
			selectValue: function(keyValue, index, key, value, valueindex) {
				var includeGroup = [];
				keyValue[index].selectedValue = value;
				keyValue[index].selectedIndex = valueindex;

				var commodityAttr = this.includeGroup;
				for (var i = 0; i < commodityAttr.length; i++) {
					for (var j = 0; j < commodityAttr[i].keyValue.length; j++) {
						if (commodityAttr[i].keyValue[j].key == key && commodityAttr[i].keyValue[j].value == value) {
							includeGroup.push(commodityAttr[i]);
						}
					}
				}

				// 判断属性是否可选
				for (var i = 0; i < keyValue.length; i++) {
					for (var j = 0; j < keyValue[i].attrValues.length; j++) {
						keyValue[i].attrValueStatus[j] = false;
					}
				}
				for (var i = 0; i < includeGroup.length; i++) {
					var flag = includeGroup[i].keyValue.every(function (ikv, ikvIndex) {
						if (keyValue[ikvIndex].key === ikv.key) {
							return keyValue[ikvIndex].selectedValue === ikv.value
						}
						return true;
					})
					// 所有key-value对都命中
					if (flag) {
						this.selectGroup = includeGroup[i];
					}
					for (var k = 0; k < keyValue.length; k++) {
						for (var j = 0; j < includeGroup[i].keyValue.length; j++) {
							if (keyValue[k].key == includeGroup[i].keyValue[j].key) {
								for (var m = 0; m < keyValue[k].attrValues.length; m++) {
									if (keyValue[k].attrValues[m] == includeGroup[i].keyValue[j].value || (includeGroup[i].keyValue[j].key == key && includeGroup[i].keyValue[j].value == value)) {
										keyValue[k].attrValueStatus[m] = true;
									}
								}
							}
						}
					}
				}
				this.keyValue = keyValue;

				var count = 0;
				for (var i = 0; i < keyValue.length; i++) {
					for (var j = 0; j < keyValue[i].attrValues.length; j++) {
						if (keyValue[i].selectedValue) {
							count++;
							break;
						}
					}
				}
				if (count < 2) { // 第一次选中，同属性的值都可选
					this.firstIndex = index
				} else {
					this.firstIndex = -1
				}
				this.setSelect();
			},
			/* 取消选中 */
			disSelectValue: function(keyValue, index, key, value, valueindex) {
				var that = this;
				var commodityAttr = that.commodityAttr;
				keyValue[index].selectedValue = '';
				keyValue[index].selectedIndex = '';

				// 判断属性是否可选
				for (var i = 0; i < keyValue.length; i++) {
					for (var j = 0; j < keyValue[i].attrValues.length; j++) {
						keyValue[i].attrValueStatus[j] = true;
					}
				}
				this.keyValue = keyValue;
				this.includeGroup = commodityAttr;
				this.selectGroup = {};

				for (var i = 0; i < keyValue.length; i++) {
					if (keyValue[i].selectedValue) {
						that.selectValue(keyValue, i, keyValue[i].key, keyValue[i].selectedValue, valueindex);
					}
				}
				that.setSelect();
			},
			setSelect: function() {
				var that = this;
				var valueStr = "";
				var value = [];
				var selectedText = '';
				for (var i = 0; i < that.keyValue.length; i++) {
					if (that.keyValue[i].selectedValue && that.keyValue[i].attrValueStatus[that.keyValue[i].selectedIndex]) {
						value.push(that.keyValue[i].selectedValue);
						selectedText += that.keyValue[i].key + '：' + that.keyValue[i].selectedValue + '；'
					}
				}
				for (var i = 0; i < value.length; i++) {
					valueStr += value[i] + ",";
				}
				valueStr = valueStr.substr(0, valueStr.length - 1)
				that.selected = valueStr

				if (!that.selectGroup.id || !valueStr) {
					that.selectPic = that.goods.listPicUrl
					that.selectMarketPrice = that.goods.marketPrice
					that.selectPrice = that.goods.retailPrice
					that.selectStock = that.goods.goodsNumber
					that.selectGoodsSn = that.goods.goodsSn
					that.selectedText = selectedText
					return;
				}
				that.selectPic = that.selectGroup.listPicUrl || that.goods.listPicUrl
				that.selectMarketPrice = that.selectGroup.marketPrice
				that.selectPrice = that.selectGroup.retailPrice
				that.selectStock = that.selectGroup.goodsNumber
				that.selectGoodsSn = that.selectGroup.goodsSn
				that.selectedText = selectedText
				that.minNumber = that.selectGroup.minSell || 1
				that.number = that.minNumber
			},
			previewSkuImg(url) {
				uni.previewImage({
					urls: [url], // 需要预览的图片http链接列表
				})
			},
			switchAttrPop: function() {
				this.openAttr = !this.openAttr;
			},
			toIndexPage: function() {
				uni.switchTab({
					url: "/pages/index/index"
				});
			},
			getCartList: function() {
				let that = this;
				util.request('cart/myCart').then(function(res) {
					if (res.code === 0) {
						that.cartGoods = res.able
						that.cartGoodsDisabled = res.disabled
						that.cartTotal = res.cartTotal
						that.checkedAllStatus = that.isCheckedAll()

						that.getFootprintList();
					}
				});
			},
			isCheckedAll: function() {
				//判断购物车商品已全选
				return this.cartGoods.every(function(element, index, array) {
					if (element.checked == true) {
						return true;
					} else {
						return false;
					}
				});
			},
			getFootprintList() {
				let that = this;
				util.request('user/footprintList').then(function(res) {
					if (res.code === 0) {
						if (res.data.records) {
							that.footprintList = res.data.records
						}
					}
				});
			},
			changeNum: function(event) {
				let that = this;
				let cartItem = event.custom;
				let number = event.value;
				cartItem.number = number;
				that.cartGoods = that.cartGoods;
				that.updateCart(cartItem.goodsId, number, cartItem.id);
			},
			updateCart: function(goodsId, number, id) {
				let that = this;

				util.request('cart/update', {
					goodsId: goodsId,
					number: number,
					id: id
				}, 'POST').then(function(res) {
					if (res.code === 0) {
						that.cartGoods = res.able
						that.cartGoodsDisabled = res.disabled
						that.cartTotal = res.cartTotal
					}
					that.checkedAllStatus = that.isCheckedAll()
				});
			},
			clearDisable: function() {
				//获取已选择的商品
				let cartIds = [];
				this.cartGoodsDisabled.forEach((item) => {
					cartIds.push(item.id)
				})
				this.cartDelete(cartIds.join(','))
			},
			deleteCartByItem: function(event) {
				//获取已选择的商品
				let cartIds = [event.item.id];
				this.cartDelete(cartIds.join(','))
			},
			editGoods: function() {
				this.isEdit = !this.isEdit;
			},
			navToGoodsDetail: function(e) {
				uni.navigateTo({
					url: '/pages/goods/goods?id=' + e.currentTarget.dataset.id
				});
			},
			checkedAll() {
				let that = this;
				let cartIds = that.cartGoods.map(function(element, index, array) {
					return element.id;
				});
				util.request('cart/checked', {
					cartIds: cartIds,
					isChecked: that.isCheckedAll() ? 0 : 1
				}, 'POST').then(function(res) {
					if (res.code === 0) {
						that.cartGoods = res.able
						that.cartGoodsDisabled = res.disabled
						that.cartTotal = res.cartTotal
					}
					that.checkedAllStatus = that.isCheckedAll()
				});
			},
			deleteCart: function() {
				//获取已选择的商品
				let that = this;

				let cartSelectGoods = this.cartGoods.filter(function(element, index, array) {
					if (element.checked == true) {
						return true;
					} else {
						return false;
					}
				});

				if (cartSelectGoods.length <= 0) {
					return false;
				}

				let cartIds = cartSelectGoods.map(function(element, index, array) {
					if (element.checked == true) {
						return element.id;
					}
				});
				that.cartDelete(cartIds.join(','))
			},
			cartDelete(cartIds) {
				let that = this;
				util.request('cart/delete', {
					cartIds: cartIds
				}, 'POST').then(function(res) {
					if (res.code === 0) {
						that.cartGoods = res.able
						that.cartGoodsDisabled = res.disabled
						that.cartTotal = res.cartTotal
					}
					that.checkedAllStatus = that.isCheckedAll()
				});
			},
			checkedItem: function(itemIndex) {
				let that = this;
				util.request('cart/checked', {
					id: that.cartGoods[itemIndex].id,
					isChecked: that.cartGoods[itemIndex].checked ? 0 : 1
				}, 'POST').then(function(res) {
					if (res.code === 0) {
						that.cartGoods = res.able
						that.cartGoodsDisabled = res.disabled
						that.cartTotal = res.cartTotal
					}
					that.checkedAllStatus = that.isCheckedAll()
				});
			},
			checkoutOrder: function() {
				//获取已选择的商品
				let that = this;

				var checkedGoods = that.cartGoods.filter(function(element, index, array) {
					if (element.checked == true) {
						return true;
					} else {
						return false;
					}
				});

				if (checkedGoods.length <= 0) {
					util.toast('您还没有选择商品哦', 2000, 'none');
					return false;
				}

				uni.navigateTo({
					url: '../shopping/checkout/checkout'
				})
			}
		},
		// 下拉刷新
		onPullDownRefresh: function() {
			// 显示顶部刷新图标
			uni.showNavigationBarLoading();
			var that = this;
			this.getCartList();
			// 隐藏导航栏加载框
			uni.hideNavigationBarLoading();
			// 停止下拉动作
			uni.stopPullDownRefresh();
		},
		onLoad: function(options) {
			uni.setStorageSync("navUrl", "/pages/cart/cart");
		},
		onShow: function() {
			// 页面显示
			this.getCartList();
		},
		onNavigationBarButtonTap(e) {
			this.isEdit = !this.isEdit;
			let text = this.isEdit ? "完成" : "编辑";
			// #ifdef APP-PLUS
			let webView = this.$mp.page.$getAppWebview();
			webView.setTitleNViewButtonStyle(0, {
				text: text
			});
			// #endif
		}
	}
</script>

<style>
	.container {
		/* #ifdef H5*/
		padding-bottom: 260rpx;
		/* #endif*/
	}

	.no-cart {
		width: 100%;
		height: auto;
		margin: 0 auto;
	}

	.no-cart .c {
		width: 100%;
		height: auto;
		margin-bottom: 150rpx;
	}

	.no-cart .c image {
		margin: 0 auto;
		display: block;
		text-align: center;
		width: 258rpx;
		height: 258rpx;
	}

	.no-cart .c text {
		margin: 0 auto;
		display: block;
		width: 258rpx;
		height: 29rpx;
		line-height: 29rpx;
		text-align: center;
		font-size: 29rpx;
		color: #999;
	}

	.title-box {
		width: 100%;
		padding-top: 200rpx;
		text-align: center;
		font-size: 28rpx;
		color: #999;
		background: url() no-repeat center 105rpx;
		background-size: 100rpx auto;
		margin-bottom: 50rpx;
	}

	.to-index-btn {
		color: #fff;
		background: #58C1E7;
		border-radius: 6px;
		width: 300rpx;
		height: auto;
		line-height: 70rpx;
		text-align: center;
		font-size: 28rpx;
		margin: 0 auto;
		display: block;
	}

	.tui-mtop {
		margin-top: 24rpx;
	}

	.tui-edit-goods {
		width: 100%;
		border-radius: 12rpx;
		overflow: hidden;
		padding: 24rpx 30rpx 0 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #333;
		font-size: 24rpx;
	}

	.tui-goods-num {
		font-weight: bold;
		color: #58C1E7;
	}

	.tui-cart-cell {
		width: 100%;
		border-radius: 12rpx;
		background: #FFFFFF;
		padding: 40rpx 0;
		overflow: hidden;
	}

	.tui-goods-item {
		display: flex;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.tui-checkbox {
		min-width: 70rpx;
		display: flex;
		align-items: center;
	}

	/* #ifdef MP-WEIXIN */
	.tui-checkbox .wx-checkbox-input {
		width: 40rpx;
		height: 40rpx;
		margin-right: 0 !important;
		border-radius: 50% !important;
		transform: scale(0.8);
		border-color: #d1d1d1 !important;
	}

	.tui-checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		background: #58C1E7;
		width: 44rpx !important;
		height: 44rpx !important;
		border: none;
	}

	/* #endif */
	/* #ifndef MP-WEIXIN */

	>>>.tui-checkbox .uni-checkbox-input {
		width: 40rpx;
		height: 40rpx;
		margin-right: 0 !important;
		border-radius: 50% !important;
		transform: scale(0.8);
		border-color: #d1d1d1 !important;
	}

	>>>.tui-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
		background: #eb0909;
		width: 45rpx !important;
		height: 45rpx !important;
		border: none;
	}

	/* #endif */
	.tui-goods-img {
		width: 220rpx;
		height: 220rpx !important;
		border-radius: 12rpx;
		flex-shrink: 0;
		display: block;
	}

	.tui-goods-info {
		width: 100%;
		padding-left: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;
		box-sizing: border-box;
		overflow: hidden;
	}

	.tui-goods-title {
		white-space: normal;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-size: 24rpx;
		color: #333;
	}

	.tui-goods-model {
		max-width: 100%;
		color: #333;
		background: #F5F5F5;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 16rpx;
		box-sizing: border-box;
	}

	.tui-model-text {
		max-width: 100%;
		transform: scale(0.9);
		transform-origin: 0 center;
		font-size: 24rpx;
		line-height: 32rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.tui-price-box {
		width: 100%;
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
	}

	.tui-goods-price {
		font-size: 34rpx;
		font-weight: 600;
	}

	.tui-activity {
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx 20rpx 100rpx;
		box-sizing: border-box;
	}

	.tui-buy {
		display: flex;
		align-items: center
	}

	.tui-bold {
		font-weight: bold;
	}

	.tui-invalid-text {
		width: 66rpx;
		margin-right: 4rpx;
		text-align: center;
		font-size: 24rpx;
		color: #fff;
		background: rgba(0, 0, 0, .3);
		transform: scale(0.8);
		transform-origin: center center;
		border-radius: 4rpx;
		flex-shrink: 0;
	}

	.tui-gray {
		color: #B2B2B2 !important;
	}

	.tui-goods-invalid {
		color: #555;
		font-size: 24rpx;
	}

	.tui-flex-center {
		align-items: center !important;
	}

	.tui-invalid-ptop {
		padding-top: 40rpx;
	}

	.tui-tabbar {
		width: 100%;
		background: #fff;
		position: fixed;
		left: 0;
		height: 100rpx;
		bottom: 0;
		padding: 0 30rpx;
		/* #ifdef H5 */
		bottom: 50px;
		height: 160rpx;
		padding-bottom:env(safe-area-inset-bottom);
		padding-left: 30rpx;
		/* #endif */
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		font-size: 24rpx;
		z-index: 99;
	}

	.tui-tabbar::before {
		content: '';
		width: 100%;
		border-top: 1rpx solid #d9d9d9;
		position: absolute;
		top: 0;
		left: 0;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
	}

	.tui-checkAll {
		display: flex;
		align-items: center;
	}

	.tui-checkbox-pl {
		padding-left: 12rpx;
	}

	.tui-total-price {
		padding-left: 30rpx;
		font-size: 30rpx !important;
	}

	/*猜你喜欢*/
	.tui-youlike {
		padding-left: 12rpx
	}

	.tui-product-list {
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
		box-sizing: border-box;
	}

	.tui-product-container {
		flex: 1;
		margin-right: 2%;
	}

	.tui-product-container:last-child {
		margin-right: 0;
	}

	.tui-pro-item {
		width: 100%;
		margin-bottom: 4%;
		background: #fff;
		box-sizing: border-box;
		box-shadow: 0 3rpx 20rpx rgba(183, 183, 183, 0.3);
		border-radius: 30rpx;
		overflow: hidden;
	}

	.tui-pro-img {
		width: 100%;
		display: block;
	}

	.tui-pro-content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 20rpx;
	}

	.tui-pro-tit {
		color: #2e2e2e;
		font-size: 26rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.tui-pro-price {
		padding-top: 18rpx;
	}

	.tui-sale-price {
		font-size: 34rpx;
		font-weight: 600;
	}

	.tui-factory-price {
		font-size: 24rpx;
		color: #a0a0a0;
		text-decoration: line-through;
		padding-left: 12rpx;
	}

	.tui-pro-pay {
		padding-top: 10rpx;
		font-size: 24rpx;
		color: #656565;
	}

	/*底部选择弹层*/

	.tui-popup {
		border-top-left-radius: 24rpx;
		border-top-right-radius: 24rpx;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-popup-box {
		position: relative;
		padding: 30rpx 0 100rpx 0;
	}

	.tui-operation-right {
		height: 100rpx;
		/* box-sizing: border-box; */
		padding-top: 0;
	}

	.tui-right-flex {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-popup-btn {
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
		/* #ifdef H5 */
		bottom: 50px;
		/* #endif */
	}

	.tui-icon-close-fill {
		position: absolute;
		top: 30rpx;
		right: 30rpx;
	}

	.tui-product-box {
		display: flex;
		align-items: flex-end;
		font-size: 24rpx;
	}

	.tui-popup-img {
		height: 200rpx;
		width: 200rpx;
		border-radius: 24rpx;
		display: block;
	}

	.tui-popup-price {
		padding-left: 20rpx;
		padding-bottom: 8rpx;
	}

	.tui-amount {
		font-size: 36rpx;
	}

	.tui-number {
		font-size: 24rpx;
		line-height: 24rpx;
		padding-top: 12rpx;
		color: #999;
	}

	.tui-popup-scroll {
		font-size: 26rpx;
	}

	.tui-scrollview-box {
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.tui-attr-title {
		padding: 10rpx 0;
		color: #333;
	}

	.tui-attr-box {
		font-size: 0;
		padding: 20rpx 0;
	}

	.tui-attr-item {
		max-width: 100%;
		min-width: 200rpx;
		height: 64rpx;
		display: -webkit-inline-flex;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: #f7f7f7;
		padding: 0 26rpx;
		box-sizing: border-box;
		border-radius: 32rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		font-size: 22rpx;
	}

	.tui-attr-item-disabled {
		color: #ccc;
	}

	.tui-attr-item-active {
		border: 1px solid #58C1E7;
		font-weight: bold;
		position: relative;
	}

	.tui-attr-item-active::after {
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		border-radius: 40rpx;
		left: 0;
		top: 0;
	}

	.tui-number-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 0 30rpx 0;
		box-sizing: border-box;
	}
</style>
